<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title> 
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<!--<link rel="stylesheet" href="../css/swiper.css" />-->
	<link rel="stylesheet" type="text/css" href="../css/treeace.css"/>
</head>
<body class="white">
	<header class="mui-bar mui-bar-transparent short" style="width: 100%;">
	    <a class="mui-action-back mui-icon mui-pull-left bexta-white-back" style="width: 50px"><span></span></a>
	    <h1 class="mui-title"></h1>
	</header>
	<div class="mui-content mui-scroll-wrapper " id="onescroll">
		<div id="ner" class="mui-scroll" >
			<div id="topHead"><img src="../icon/mask-big.jpg" class="maximg" alt="" /></div>
			<div class="mui-content-padded">
				<div class="names"></div>
				<div class="content"></div>
				<button type="button" class="mui-btn bexta-btn mui-btn-block more" >了解更多</button>
				<div class="hot-title">平台服务</span></div>
				<div class="mui-row">
					<div class="mui-col-xs-6 mui-col-sm-6">
						<img src="../icon/mask-ss.jpg" class="maximg" alt="" />
						<div></div>
					</div>
					<div class="mui-col-xs-6 mui-col-sm-6">
						<img src="../icon/mask-ss.jpg" class="maximg" alt="" />
						<div></div>
					</div>
					<div class="mui-col-xs-6 mui-col-sm-6">
						<img src="../icon/mask-ss.jpg" class="maximg" alt="" />
						<div></div>
					</div>
					<div class="mui-col-xs-6 mui-col-sm-6">
						<img src="../icon/mask-ss.jpg" class="maximg" alt="" />
						<div></div>
					</div>
				</div>
			</div>
		</div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/bexta.js"></script>
<script>
	var apps, views;
	mui.init({
		beforeback:function(){
			bexta.setStatus(false);
		}
	})
	mui.plusReady(function () {
	   document.querySelector('.mui-bar-transparent').style.height = (44 + bexta.getStatusHeight()) + 'px';	
	   document.querySelector('.mui-title').style.lineHeight = (50 + bexta.getStatusHeight()) + 'px';	
	   document.querySelector('.mui-bar .mui-icon').style.paddingTop = (10+bexta.getStatusHeight()) + 'px';
	});
	mui.plusReady(function () {
	   	views = bexta.getWebview();
	   	bexta.ajax(api.shop_shop_infor, function(res){
	   		initVue(res);
	   	}, {data:{sid:views.gid}});
	   	var scroll = mui('#onescroll.mui-scroll-wrapper').scroll();
	   	mui('.mui-bar-transparent').transparent2({
			scroll:scroll,
   			offset:50,
   			bgr:true,
	   		success:function(obj, opa){
	   			var backbtn = obj.element.querySelector('.bexta-white-back');
	   			document.querySelector('.mui-title').style.opacity = opa;
	   			if( opa > 0.3 ){
	   				backbtn.classList.add('bexta-drak-back');
	   			}else{
	   				backbtn.classList.remove('bexta-drak-back')
	   			}
	   		}
	   	});
	   	views.addEventListener('show', function(){
	   		 bexta.setStatus(true);
	   	});
	});
	function initVue(res){
		document.querySelector('#topHead img').setAttribute('data-load', res.shop.photo);
		document.querySelector('.names').innerHTML = res.shop.shop_name;
		document.querySelector('.mui-title').innerHTML = res.shop.shop_name;
		document.querySelector('.content').innerHTML = res.shop.sub_body;
		//平台服务
		var row = document.querySelector('.mui-row'),
			str = '';
		mui.each(res.shop.service, function(){
			str += '<div class="mui-col-xs-6 mui-col-sm-6 link" _id="olist" _title="'+this.name+'" _href="olist.html" _extras="tid='+this.id+'&sid='+views.gid+'">' +
					'<img src="../icon/mask-ss.jpg" data-load="'+this.photo+'" class="maximg" alt="" />' + 
					'<div>'+this.name+'</div>' +
					'</div>';
		});
		row.innerHTML = str;
		bexta.imageLoad('[data-load]');
		document.querySelector('.more').addEventListener('tap', function(){
			mui.openWindow({
				id:"terraceDetail",
				url:'terraceDetail.html',
				extras:res,
				show:{aniShow:'pop-in'},
				waiting:{
					aniShow:false
				}
			});
			
			
		});
		
	}
</script>
</body>
</html>
